<template>
    <div class="con">
        <div class="box">
            <div>
                <img :src="imageSrc" alt="" />
            </div>
            <div class="box-inner">
                <span class="text">类型:{{ this.type }}</span>
                <span class="text">开始地址:{{ this.beginAddress }}</span>
                <span class="text">结束地址:{{ this.endAddress }}</span>
                <span class="text">详细地址:{{ this.newAddress }}</span>
            </div>
        </div>
        <div class="circle-button">
            <el-button type="primary" v-if="!isTaken" @click="takeOrder" class="OrderButton">接单</el-button>
            <el-button type="success" v-else class="OrderButton">已接单</el-button>
            <el-button @click="getOut" class="OrderButton">退出</el-button>
        </div>
    </div>
</template>
<script>
import axios from '../service/service'
export default ({
    data() {
        return {
            type: '',
            beginAddress: ' ',
            endAddress: '',
            newAddress: '',
            isTaken: false
        }
    },
    created() {
        this.fetchMessage()
    },
    methods: {
        async fetchMessage() {
            await axios.post('/getMessage', { OrderId: this.$route.params.OrderId })
                .then(res => {
                    console.log(res);
                    this.type = res.data[0].type
                    this.beginAddress = res.data[0].beginAddress
                    this.endAddress = res.data[0].endAddress
                    this.newAddress = res.data[0].newAddress
                     this.imageSrc = res.data[0].src == null ? 'https://bpic.588ku.com/element_origin_min_pic/19/04/10/37e4fc917a27adbc791e30095893a2d1.jpg' : res.data[0].src
                    this.isTaken = res.data[0].isOrder == -1 ? false : true
                })
        },
        getOut() {
            this.$router.push({
                name: 'TaskCard',
            })
        },
        takeOrder() {
            this.isTaken = true
            var OrderId = this.$route.params.OrderId
            console.log(OrderId);
            axios.post('/postOrder', { OrderId: OrderId, isOrder: this.isTaken == true ? 1 : -1 })
        }
    }
}
)
</script>
<style>
.con {
    background: url("../assets/接单背景.jpg");
    background-size: 100% 100%;
    padding: 15px;
    height: 44rem;
}

.con>.box {
    margin: 1rem;
    border-radius: 5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 80%;

}

.con>.box-inner {
    margin: 1rem;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.con img {
    width: 50rem;
    height: 30rem;
    border-radius: 5rem;
}

.box-inner>.text {
    margin: 1rem;
    font-size: 20px;
    font-family: cursive;
}

.circle-button {
    background: rgba(255, 255, 255, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    margin-bottom: 24px;
    border-radius: 5rem;
}

.OrderButton {
    width: 50%;
    border-radius: 5rem;
}
</style>